<template>
  <div>
    <puplic-modal
      :publicVisible="publicVisible"
      :title="title"
      modalStyle="addEditSupportModal"
      width="560px"
      @cancel="cancel"
      @handleOk="handleOk"
    >
      <div slot="content" class="content">
        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">检查类型:</div>
            <div class="label">常规检查</div>
          </div>
        </div>

        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">所属分类:</div>
            <div class="input-item" style="width: 100%">
              <a-select
                ref="select"
                v-model="queryParam.industryExamineCategoryId"
                :disabled="title == '编辑检查项'"
                allowClear
                placeholder="请选择所属分类"
                @change="handel_change"
              >
                <a-select-option v-for="(item, index) in btnList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">内容标题:</div>
            <div class="input-item" style="width: 100%">
              <a-textarea
                v-model="queryParam.industryExamineDetailName"
                :disabled="title == '编辑检查项'"
                :maxLength="100"
                placeholder="请输入标题内容"
                style="height: 100px; overflow: auto; resize: none"
              />
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">违法描述:</div>
            <div class="input-item" style="width: 100%">
              <a-textarea
                v-model="queryParam.descriptionOfViolation"
                :maxLength="100"
                placeholder="请输入违法描述"
                style="height: 100px; overflow: auto; resize: none"
              />
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">问题选项:</div>
            <div class="input-item" style="width: 100%">
              <a-checkbox v-model="checked" disabled>是</a-checkbox>
              <a-checkbox v-model="checked" disabled>否</a-checkbox>
              <a-checkbox v-model="noInvolveStatus">不涉及</a-checkbox>
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">法律依据:</div>
            <div class="input-item" style="width: 100%" @click="showAccord">
              <div class="bindBtn"><img alt="" src="@/assets/imgs/bind.png" /> 绑定法律条文</div>
            </div>
          </div>
        </div>

        <div class="search-group" style="width: 100%">
          <div class="input-wrap" style="width: 100%">
            <div class="label">依据条文:</div>
            <div v-if="articleList.length > 0" class="accord-container">
              <div v-for="(item, index) in articleList" :key="index" class="according-wrap">
                <div class="according flex">
                  <div class="according-label">
                    <div class="icon"></div>
                    依据{{ 1 + index }}
                  </div>
                  <a-tooltip placement="top">
                    <template slot="title"> 《{{ item.articleNo }}》 </template>
                    <div class="value text-overflow cursor" style="width: 240px">
                      《{{ item.regulationsId_dictText }}》{{ item.articleNo }}
                    </div>
                  </a-tooltip>

                  <div class="btn flex justify-between" style="margin-left: 5px">
                    <span class="deatil-color cursor" @click="showAccordDetails(item)">详情</span>
                    <span class="del-color cursor" @click="deleteById(item.regulationsArticleId)">删除</span>
                  </div>
                </div>
              </div>
            </div>

            <div v-else class="accord-container" style="color: #4791dc">请选择条文</div>
          </div>
        </div>
      </div>
    </puplic-modal>
    <chose-accord ref="accord" @articleList="getArticleList"></chose-accord>
    <accord-details ref="accordDetails"></accord-details>
  </div>
</template>
<script>
import choseAccord from './choseAccord'
import accordDetails from './accordDetails'
import puplicModal from '@/components/publicModal'
import { deleteAction, getAction, downFile, getFileAccessHttpUrl } from '@/api/manage'
import { examineDetailCategoryAdd, examineDetailCategoryEdit } from '@/api/industry'
export default {
  components: { puplicModal, choseAccord, accordDetails },
  name: 'addEditSupportModal',
  data() {
    return {
      title: '新增检查项',
      publicVisible: false,
      queryParam: {},
      records: {},
      btnList: [],
      articleList: [],

      checked: true,
      noInvolveStatus: false,
    }
  },
  methods: {
    show(records) {
      console.log(records, 'records')
      // console.log(this.queryParam, 'queryParam')
      this.records = records
      this.publicVisible = true
      this.btnList = records.btnList
      this.queryParam.industryExamineId = records.industryExamineId
      if (records && records.id) {
        this.title = '编辑检查项'
        this.queryParam.industryExamineCategoryId = records.industryExamineCategoryId
        this.queryParam.industryExamineDetailName = records.industryExamineDetailName
        this.queryParam.descriptionOfViolation = records.descriptionOfViolation
        this.noInvolveStatus = records.noInvolveStatus == 0 ? false : true
        this.getAllLawList(records.id)
      } else {
        this.title = '新增检查项'
        this.queryParam.industryExamineCategoryId = records.industryExamineCategoryId
      }
    },
    showAccord(accord) {
      this.$refs.accord.show()
    },
    showAccordDetails(item) {
      this.$refs.accordDetails.show(item)
    },
    getArticleList(articleList) {
      this.articleList.push(...articleList)
      // 处理成后端想要的数据
      this.articleList = this.articleList.map((item) => {
        return {
          articleContent: item.articleContent,
          articleNo: item.articleNo,
          regulationsId: item.regulationsId,
          regulationsArticleId: item.id || item.regulationsArticleId,
          regulationsId_dictText: item.regulationsId_dictText || item.regulationsName,
        }
      })
      // 对数组去重
      let obj = {}
      this.articleList = this.articleList.reduce((pre, cur) => {
        obj[cur.regulationsArticleId] ? '' : (obj[cur.regulationsArticleId] = true && pre.push(cur))
        return pre
      }, [])
    },
    deleteById(regulationsArticleId) {
      var index = this.articleList.findIndex((item) => {
        return item.regulationsArticleId == regulationsArticleId
      })
      this.articleList.splice(index, 1)
    },
    handel_change() {
      this.$forceUpdate()
    },
    // ! 根据id 查询绑定的列表
    async getAllLawList(id) {
      let { result } = await getAction('/regulations/article/find_industry_examine_detail_id', {
        industryExamineDetailId: id,
      })
      this.getArticleList(result)
    },
    async handleOk() {
      if (this.queryParam.industryExamineCategoryId == null) {
        this.$message.warn('请选择所属分类!')
        return
      }

      if (this.queryParam.industryExamineDetailName == null || this.queryParam.industryExamineDetailName == '') {
        this.$message.warn('请输入内容标题!')
        return
      }

      if (this.queryParam.descriptionOfViolation == null || this.queryParam.descriptionOfViolation == '') {
        this.$message.warn('请输入违法描述!')
        return
      }

      if (this.articleList.length < 1) {
        this.$message.warn('请绑定法律条文!')
        return
      }

      this.queryParam.regulationsList = this.articleList
      this.queryParam.noInvolveStatus = this.noInvolveStatus ? '1' : '0'

      if (this.title == '新增检查项') {
        let res = await examineDetailCategoryAdd(this.queryParam)
        this.$message.success(res.message)
        this.$emit('refresh')
        this.cancel()
      } else {
        this.queryParam.id = this.records.id
        let res = await examineDetailCategoryEdit(this.queryParam)
        this.$message.success(res.message)
        this.$emit('refresh')
        this.cancel()
      }
    },
    cancel() {
      this.publicVisible = false
      this.noInvolveStatus = false
      this.queryParam = {}
      this.articleList = []
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/common.less';
/deep/ .ant-checkbox-wrapper {
  color: #509eee;
}
/deep/ .ant-checkbox-disabled + span {
  color: #509eee;
}
/deep/ .content {
  padding: 20px;
}
.search-group {
  padding: 10px 0;
}
.bindBtn {
  width: 150px;
  height: 40px;
  background: rgba(18, 74, 132, 0.2706);
  border-radius: 4px;
  border: 1px solid #1388ff;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #1388ff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  img {
    width: 16px;
    height: 16px;
  }
}

.according-wrap {
  width: 100%;
  .according {
    padding-right: 20px;
    .according-label {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      color: var(--theme-tab-text-color);
      .icon {
        width: 6px;
        height: 6px;
        background: #509eee;
        margin-right: 5px;
      }
    }
    .value {
      margin-left: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--theme-modal-label-value-color);
    }
    .btn {
      width: 70px;
    }
  }
}
</style>
